<script setup lang="ts">
import { ref } from 'vue'
import { queryContracts, getContract } from '../../api/Contract'

const tableData = ref([])
const meta = ref({
  total: 0,
  page: 1,
  limit: 10,
})

queryContracts(10, 1).then((resp) => {
  tableData.value = resp.data
  meta.value = resp.meta
})

const handleSizeChange = () => {}

const handleCurrentChange = () => {}
</script>

<template>
  <el-table :data="tableData" :border="true" style="width: 100%">
    <el-table-column prop="id" label="Id" width="180" />
    <el-table-column prop="factionSymbol" label="FactionSymbol" width="180" />
    <el-table-column prop="type" label="Type" width="180" />
    <el-table-column prop="expiration" label="Expiration" />
  </el-table>
  <el-pagination
    v-model:current-page="meta.page"
    :page-size="meta.limit"
    size="small"
    :background="true"
    layout="total, prev, pager, next"
    :total="meta.total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<style scoped></style>
